<template>
  <div class="hotel_main">
    <!-- 顶部面包屑 -->
    <p class="crumb">
      酒店
      <span class="el-icon-arrow-right"></span>
      {{ $store.state.hotel.cityName }}酒店预定
    </p>

    <!-- 顶部筛选 s-->
    <div class="into_info">
      <PostSerch
        @handlePriceBtn="handlePriceBtn"
        @cityNameChange="cityNameChange"
      />
    </div>
    <!-- 顶部筛选 e -->

    <!-- 酒店位置 s-->
    <div class="hotel_seat">
      <HotelSeat
        @getCityId="getCityId"
        :hotelLocation="hotelLocation"
        :hotelScenics="hotelScenics"
      />
    </div>
    <!-- 酒店位置 e-->

    <!-- 底部筛选 s -->
    <div class="screen_hotel">
      <ScreenHotel
        :hotelOptions="hotelOptions"
        @screenFormChange="screenFormChange"
        @clearHotelForm="clearHotelForm"
      />
    </div>
    <!-- 底部筛选 e -->

    <!-- 酒店列表 s -->
    <div class="hotel_list">
      <HotelList
        :hotelDetail="hotelDetail"
        @paginationChange="paginationChange"
      />
    </div>
    <!-- <div @click="$router.push('/hotel/hotel')">跳</div> -->
    <!-- 酒店列表 e -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotelOptions: [], //酒店选项数据
      hotelDetail: {}, //酒店详情数据
      hotelLocation: [], //定位
      hotelScenics: [], //区域
      hotelTotal: {},
    };
  },
  watch: {
    $route: {
      async handler(val) {
        let { cityName } = val.query;
        //console.log(this.$store);
        //获取城市id,和城市区域
        if (cityName) {
          this.$store.commit("hotel/setCityName", cityName);
          let resCity = await this.$axios.get("/cities", {
            params: {
              name: cityName,
            },
          });
          console.log(resCity);
          let id = resCity.data.data[0].id;
          this.$store.commit("hotel/setCityId", id);
          this.hotelScenics = resCity.data.data[0].scenics;
        }
        this.getHotelDetail(val);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    //酒店选项
    this.$axios({
      method: "get",
      url: "/hotels/options",
    }).then((res) => {
      this.hotelOptions = res.data.data;
    });
  },
  methods: {
    //获取酒店详情函数
    async getHotelDetail(val) {
      let id = this.$store.state.hotel.id;
      let urlStr = "?";
      for (let key in val.query) {
        if (val.query.length != 0 && key != "cityName") {
          if (typeof val.query[key] == "object") {
            val.query[key].forEach((element) => {
              urlStr += key + "=" + element + "&";
            });
          } else {
            urlStr += key + "=" + val.query[key] + "&";
          }
        }
      }
      urlStr = urlStr + "city=" + id;
      let resHotel = await this.$axios.get("/hotels" + urlStr);
      //将酒店详情赋值给
      this.hotelDetail = resHotel.data;
      this.hotelLocation = resHotel.data.data;
    },
    //顶部筛选组件点击查看价格事件
    handlePriceBtn(val) {
      //console.log(val);
      if (val.city) {
        this.hotelTotal.city = val.city;
      }
      if (val.enterTime) {
        this.hotelTotal.enterTime = val.enterTime;
      }
      if (val.leftTime) {
        this.hotelTotal.leftTime = val.leftTime;
      }

      this.getHotelDetail();
    },
    //页码发生变化事件
    paginationChange(val) {
      this.hotelTotal._limit = val._limit;
      this.hotelTotal._start = val._start;
      this.getHotelDetail();
    },
    //筛选发生变化事件
    screenFormChange(val) {
      //console.log(val);
      for (let key in val) {
        if (val[key].length != 0) {
          this.hotelTotal[key] = val[key];
        }
      }
      //console.log(this.hotelTotal);
      this.getHotelDetail();
    },
    //重置
    clearHotelForm() {
      this.hotelTotal = {
        city: 73, //城市id
      };
      this.getHotelDetail();
    },
    //定位到城市id
    getCityId(val) {
      //console.log(val);
      this.hotelTotal.city = val;
      this.getHotelDetail();
    },
    //城市搜索框内容发生变化
    async cityNameChange(val) {
      let resCity = await this.$axios.get("/cities", {
        params: {
          name: val,
        },
      });
      console.log(resCity);
      let id = resCity.data.data.id;
      //获取酒店详情
      let resHotel = await this.$axios.get("/hotels", {
        params: {
          city: 197,
        },
      });
      //将酒店详情赋值给
      this.hotelDetail = resHotel.data;
      this.hotelLocation = resHotel.data.data;
      this.hotelScenics = resCity.data.data[0].scenics;
    },
  },
};
</script>

<style lang="less" scoped>
.hotel_main {
  width: 1000px;
  margin: 20px auto;
  .crumb {
    font-size: 14px;
    color: #606266;
    span {
      font-size: 14px;
      margin: 0 5px;
      color: rgb(200, 217, 235);
    }
  }
  .into_info {
    padding: 15px 0;
  }
  .screen_hotel {
    margin: 20px 0;
  }
}
</style>